import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Card, message, Table, Descriptions, Image } from 'antd';
import textVar from '../textVar';
import { routerRedux } from 'dva/router';

const mapStateToProps = (state: any) => {
  return {
    dataPermission: state.dataPermission,
    loading: state.loading.effects['dataPermission/getFetchPage'],
    permissions: state?.menu?.permissions,
  };
};

class commodityManagementDetail extends Component {
  state = {
    info: {},
    isImage: false,
  };
  componentDidMount() {
    const { record = null } = this.props?.location;
    if (record) {
      this.setState({
        info: {
          ...record,
          //   pictureList: [
          //     'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
          //     'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
          //   ],
        },
      });
    }
    console.log(record);
  }
  // get payTypeFn() {
  //   const { payType = [] } = this.state?.info;
  //   const arr = payType?.map(e => textVar.textFn(e, 'payType')) || [];
  //   return arr.join(',');
  // }
  get payTypeString() {
    const { info } = this.state;
    return textVar.textFn(info?.payType, 'payType');
  }
   get buyerFn() {
    const { info } = this.state;
    const buyers =  eval('(' + info?.buyers + ')')
    console.log('buyers', buyers)
    const arr = buyers?.map(e => textVar.textFn(e, 'buyers')) || [];
    return arr.join(',');
  }
  goback = () => {
    this.props.dispatch(
    routerRedux.push({
        pathname: '/commodity/commodityManagement',
         }),
    );
  };
  render() {
    const { info, isImage } = this.state;
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'skuName',
      },
      {
        title: '规格',
        dataIndex: 'name',
      },
      {
        title: '备件编号',
        dataIndex: 'skuId',
      },
      {
        title: '价格',
        dataIndex: 'finalPrice',
      },
    ];
    const list = info?.skuList || [];
    return (
      <div>
        <Card title="商品详情">
          <Descriptions bordered>
            {/* <Descriptions.Item label="品牌ID">{info?.brandId}</Descriptions.Item>
            <Descriptions.Item label="品牌">{info?.dfBrand}</Descriptions.Item> */}
            <Descriptions.Item label="商品类目参数">{info?.categoryParam}</Descriptions.Item>
            <Descriptions.Item label="商品编号">{info?.productId}</Descriptions.Item>
            <Descriptions.Item label="权益">{info?.benefits}</Descriptions.Item>
            {/* <Descriptions.Item label="二级分类ID">差参数</Descriptions.Item> */}
            <Descriptions.Item label="商品名称">{info?.productName}</Descriptions.Item>

            {/* <Descriptions.Item label="品牌ID">{info?.brandId}</Descriptions.Item> */}
            {/* <Descriptions.Item label="二级分类名">差参数</Descriptions.Item> */}
            <Descriptions.Item label="产品最高价格">{info?.maxPrice}</Descriptions.Item>
            {/* <Descriptions.Item label="品牌名称">{info?.brandName}</Descriptions.Item> */}
            <Descriptions.Item label="支付方式">{this.payTypeString}</Descriptions.Item>
            <Descriptions.Item label="最大购买量">{info?.maxOrderNum}</Descriptions.Item>
            <Descriptions.Item label="购买人群">{this.buyerFn}</Descriptions.Item>
            <Descriptions.Item label="是否供应商发货">
              {info?.sendBySupplier ? '是' : '否'}
            </Descriptions.Item>
            <Descriptions.Item label="商品类目名称">{info?.catName}</Descriptions.Item>
            {/* <Descriptions.Item label="排序分数">差参数</Descriptions.Item> */}
            <Descriptions.Item label="供应商ID">{info?.supplierId}</Descriptions.Item>
            <Descriptions.Item label="供应商名称">{info?.supplierName}</Descriptions.Item>
            <Descriptions.Item label="商品图片">
            {info?.imgUrl && <Image src={info?.imgUrl} placeholder={true} height={50} width={50}/>}
              {/* {info?.pictureList && (
                <Image
                  preview={{ visible: false }}
                  src={info?.pictureList[0]}
                  placeholder={true}
                  onClick={() => this.setState({ isImage: true })}
                />
              )} */}
            </Descriptions.Item>
            <Descriptions.Item label="商城SPU二维码图片">
              {info?.productQrcode && <Image src={info?.productQrcode} placeholder={true} height={50} width={50} />}
            </Descriptions.Item>
            <Descriptions.Item label="商品描述" span={3}>
                <div style={{"maxWidth":"400px"}}>
                {info?.description}
                </div>
            </Descriptions.Item>
          </Descriptions>
          {info?.pictureList && (
            <div style={{ display: 'none' }}>
              <Image.PreviewGroup
                preview={{
                  visible: isImage,
                  onVisibleChange: (vis: boolean) => this.setState({ isImage: vis }),
                }}
              >
                {info?.pictureList.map(e => (
                  <Image src={e} />
                ))}
              </Image.PreviewGroup>
            </div>
          )}
          <Card bordered={false} title="商品规格" style={{ paddingTop: '15px' }}>
            <Table
              dataSource={list}
              rowKey="sid"
              scroll={{ x: true }}
              columns={columns}
              pagination={false}
              // pagination={{
              //   showLessItems: true,
              //   size: 'small',
              //   showSizeChanger: true,
              //   showQuickJumper: true,
              //   pageSizeOptions: ['5', '10', '20', '30', '40', '50'],
              // }}
            />
          </Card>
          <div style={{ textAlign: 'center' }}>
            <Button
              type="primary"
              onClick={this.goback}
            >
              关闭
            </Button>
          </div>
        </Card>
      </div>
    );
  }
}

export default connect(mapStateToProps)(commodityManagementDetail);
